<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script type="module">
        alert("你访问的是教师机的资源")
        console.log(111);
        // model  module
        // 原生浏览器环境 要使用ESM 必须要满足2个前提条件 ：
        // 1.网页需要通过服务器打开  ,通过网页地址查看 ，如果是http协议就是通过服务器打开的；   2. 设置script 标签的type="module";
        //直接访问的本机的文件
        //file:///D:/4102/day12/code/2.ESM%E7%9A%84%E5%AF%BC%E5%85%A5%E5%92%8C%E5%AF%BC%E5%87%BA.html
        
        //带有http或者https的前缀，代表访问的网络上的资源
        //https://www.baidu.com/   127.0.0.1:本机

        // file:///Users/yuweihai/Desktop/%E7%9B%AE%E5%BD%95/%E9%B8%BF%E8%92%99%E5%89%8D%E7%AB%AF/zz4101/day12/2.ESM%E7%9A%84%E5%AF%BC%E5%85%A5%E5%92%8C%E5%AF%BC%E5%87%BA.html  本地地址；
        // live server 插件
        // http://127.0.0.1:5500/day12/2.ESM%E7%9A%84%E5%AF%BC%E5%85%A5%E5%92%8C%E5%AF%BC%E5%87%BA.html  服务器地址
        // 协议 http 
        

        // 2.导入和导出

        // （1）引入模块 ,直接引入
        // 模块化方式  每个文件都有自己的命名空间 相互之间不会影响；


        // （2）导出需要导出的内容
        // 引入 export 导出的内容 



        // 总结 导入 和导出 
        /*
        导入 ： 
            1.直接导入文件  import "路径地址"
            2.导入文件且导入变量   import {导出的变量1,导出的变量2} from "地址"
        导出 ： export  ： 可以导出多个 
            1.先定义在导出  export {导出的变量}
            2.直接导出定义的变量 export let a = 10;

        */

        // 练习 ： 有一个类 在 a 模块 需要 通过a模块把这个类导出到b模块 ，最终index.html引入b模块 实例化这个类；
        // index.html 依赖 b.js    b.js 依赖 a.js  
        // 类 a.js  --->  b.js  --->  index.html  执行 ；







    </script>
</body>

</html>